<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

 .active {
     background-color: red;
 }

 .green {
     background-color: green;
 }

    </style> 
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <!-- 使用组件 -->
        <home>
            <!-- v-slot:default="slotProps" -->


            <!-- my-home-slot  不能用驼峰命名法 -->
            <template  v-slot:my-home-slot='myhomeData'>
               <h2>{{myhomeData.bbb}}</h2>

               <ul>
                   <li v-for="(item,key,index) in  myhomeData.myuser"
                   :class=" index %2==0?'active' : 'green' "
                   >
                       {{item}}----{{key}}
                   </li>
               </ul>
            </template>
        </home>
    </div>



    <!-- 模板 -->
  <template id='myhome'>
      <div class="Box">
           
        <h2>  home 组件</h2>

        <slot  bbb='hello jvav '  ccc='厉害'  :myuser='user'  name='my-home-slot' >  {{aaa}}  </slot>
      </div>
  </template>



    <script src="./vue.js"></script>
    <script>
    Vue.component('home',{
        template:'#myhome',
        data() {
            return{
                user:{
                    lastName:'张三',
                    firstName:'三张',
                    sex:'男',
                    age:10,


                },
                aaa:'hello  尤大达',




            }
        }
    })



        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue'
            },
            methods: {
            }
        });
    </script>
</body>

</html>